<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    /*存在id属性的元素  a[]{}  */
    /*选中a标签中, 带有id属性的*/
    a[id]{
        background: yellow;
    }
    /*选中a标签中 属性id=third的 */
    a[id = third]{
        background: green;
    }
    /**=的意思是包含, 这里引号加不加都一样*/
    a[class*="bbb"]{
        background: red;
    }
    /*选中href中以http开头的*/
    a[href^=http]{
        background: brown;
    }
    /*以xx结尾*/
    a[href$=img]{
        background: blueviolet;
    }

    </style>


</head>
<body>

<p class="demo">

    <a href="" class="links item first" id="first">1</a>
    <a href="" class="links item first" target="_blank" title="test">2</a>
    <a href="" id="third">3</a>
    <a href="" class="aaabbbccc">4</a>
    <a href="http://www.baidu.com">5</a>
    <a href="http://www.aba.com">6</a>
    <a href="abcd.img">7</a>
    <a href="">8</a>
    <a href="abcd.img">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>


</body>
</html>